<template>
    <div :style="styleColor" class="number" @click="clickAEO" style="cursor:pointer">
        <div class="title">AEO企业数量</div>
        <div class="count">
            <div class="num">{{num}} <span class="jia">家</span></div>
           
        </div>
    </div>
</template>

<script>
import { reqFindCommodityNum } from '@/api/home/index.js'
import { mapGetters } from 'vuex'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            options: {},
            num:0
        }
    },
    computed: {
        ...mapGetters(['customCode']),
        transStyle() {
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    mounted() {
        this.options = this.value;

    },
    created() {
        // console.log(this.$store.state.homeStatus.customName);
        if (this.customCode == '' || !this.customCode) {
            // 默认22 上海海关
            this.getNum('22')
        } else {
            // 有数据就用store里面的数据
            this.getNum(this.customCode)
        }

    },
    watch: {
        customCode(val) {
            // console.log(val);
            this.getNum(val)

        }
    },
    methods: {
        clickAEO(){
            this.$store.commit('homeStatus/changeAEODialogShow',{
                show:true,
                value:'AEO'
            })
        },
        async getNum(code) {


            const res = await reqFindCommodityNum({ customsCode: code, coClass: '高级认证企业' })

            if(!res.data||!res.data.num) {
                this.num = 0
            }else {
                this.num = res.data.num
            }
           


        }
    }
}
</script>

<style scoped lang="scss">
.number {
    background: url('../../../../../../assets/images/bigViewIMG/jinCompany.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;

    .title {
        position: absolute;
        top: 83px;
        left: 105px;
        width: 112px;
        height: 24px;
        font-size: 15px;
    }

    .count {
        position: absolute;
        top: 38px;
        left: 80px;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .num {
            font-size: 26px;
            color: #00ffff;
            width: 120px;
            height: 37px;
            display: flex;
            justify-content: flex-end;
            .jia {
                color: #fff;
                    margin-left: 5px;
                    font-size: 18px;
                    width: 20px;
                    height: 30px;
                    display: flex;
                        align-items: flex-end;
                }
        }

        
    }
}
</style>